<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link href="../../jquery/bootstrap_3.3.0/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>

    <script src="../../jquery/jquery-1.11.1-min.js" type="text/javascript"></script>
    <script src="../../jquery/bootstrap_3.3.0/js/bootstrap.min.js" type="text/javascript"></script>
</head>
<body>

<!-- 我的资料 -->
<div class="modal fade" id="myInformation" role="dialog">
    <div class="modal-dialog" role="document" style="width: 30%;">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal" type="button">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title">我的资料</h4>
            </div>
            <div class="modal-body">
                <div style="position: relative; left: 40px;">
                    姓名：<b>张三</b><br><br>
                    登录帐号：<b>zhangsan</b><br><br>
                    组织机构：<b>1005，市场部，二级部门</b><br><br>
                    邮箱：<b>zhangsan@bjpowernode.com</b><br><br>
                    失效时间：<b>2017-02-14 10:10:10</b><br><br>
                    允许访问IP：<b>127.0.0.1,192.168.100.2</b>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal" type="button">关闭</button>
            </div>
        </div>
    </div>
</div>

<!-- 修改密码的模态窗口 -->
<div class="modal fade" id="editPwdModal" role="dialog">
    <div class="modal-dialog" role="document" style="width: 70%;">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal" type="button">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title">修改密码</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" role="form">
                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="oldPwd">原密码</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input class="form-control" id="oldPwd" style="width: 200%;" type="text">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="newPwd">新密码</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input class="form-control" id="newPwd" style="width: 200%;" type="text">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="confirmPwd">确认密码</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input class="form-control" id="confirmPwd" style="width: 200%;" type="text">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal" type="button">取消</button>
                <button class="btn btn-primary" data-dismiss="modal" onclick="window.location.href='../../login.jsp';"
                        type="button">更新
                </button>
            </div>
        </div>
    </div>
</div>

<!-- 退出系统的模态窗口 -->
<div class="modal fade" id="exitModal" role="dialog">
    <div class="modal-dialog" role="document" style="width: 30%;">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal" type="button">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title">离开</h4>
            </div>
            <div class="modal-body">
                <p>您确定要退出系统吗？</p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal" type="button">取消</button>
                <button class="btn btn-primary" data-dismiss="modal" onclick="window.location.href='../../login.jsp';"
                        type="button">确定
                </button>
            </div>
        </div>
    </div>
</div>

<!-- 顶部 -->
<div id="top" style="height: 50px; background-color: #3C3C3C; width: 100%;">
    <div style="position: absolute; top: 5px; left: 0px; font-size: 30px; font-weight: 400; color: white; font-family: 'times new roman'">
        CRM &nbsp;<span style="font-size: 12px;">&copy;2017&nbsp;动力节点</span></div>
    <div style="position: absolute; top: 15px; right: 15px;">
        <ul>
            <li class="dropdown user-dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:void(0)"
                   style="text-decoration: none; color: white;">
                    <span class="glyphicon glyphicon-user"></span> zhangsan <span class="caret"></span>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="../../workbench/index.jsp"><span class="glyphicon glyphicon-home"></span> 工作台</a></li>
                    <li><a href="../index.html"><span class="glyphicon glyphicon-wrench"></span> 系统设置</a></li>
                    <li><a data-target="#myInformation" data-toggle="modal" href="javascript:void(0)"><span
                            class="glyphicon glyphicon-file"></span> 我的资料</a></li>
                    <li><a data-target="#editPwdModal" data-toggle="modal" href="javascript:void(0)"><span
                            class="glyphicon glyphicon-edit"></span> 修改密码</a></li>
                    <li><a data-target="#exitModal" data-toggle="modal" href="javascript:void(0);"><span
                            class="glyphicon glyphicon-off"></span> 退出</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>

<!-- 创建部门的模态窗口 -->
<div class="modal fade" id="createDeptModal" role="dialog">
    <div class="modal-dialog" role="document" style="width: 80%;">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal" type="button">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="myModalLabel"><span class="glyphicon glyphicon-plus"></span> 新增部门</h4>
            </div>
            <div class="modal-body">

                <form class="form-horizontal" role="form">

                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="create-code">编号<span
                                style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input class="form-control" id="create-code" placeholder="编号不能为空，具有唯一性" style="width: 200%;"
                                   type="text">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="create-name">名称</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input class="form-control" id="create-name" style="width: 200%;" type="text">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="create-manager">负责人</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input class="form-control" id="create-manager" style="width: 200%;" type="text">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="create-phone">电话</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input class="form-control" id="create-phone" style="width: 200%;" type="text">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="create-describe">描述</label>
                        <div class="col-sm-10" style="width: 55%;">
                            <textarea class="form-control" id="create-describe" rows="3"></textarea>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal" type="button">关闭</button>
                <button class="btn btn-primary" data-dismiss="modal" type="button">保存</button>
            </div>
        </div>
    </div>
</div>

<!-- 修改部门的模态窗口 -->
<div class="modal fade" id="editDeptModal" role="dialog">
    <div class="modal-dialog" role="document" style="width: 80%;">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal" type="button">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="myModalLabel"><span class="glyphicon glyphicon-edit"></span> 编辑部门</h4>
            </div>
            <div class="modal-body">

                <form class="form-horizontal" role="form">

                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="create-code">编号<span
                                style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input class="form-control" id="create-code" placeholder="不能为空，具有唯一性" style="width: 200%;"
                                   type="text" value="1110">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="create-name">名称</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input class="form-control" id="create-name" style="width: 200%;" type="text" value="财务部">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="create-manager">负责人</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input class="form-control" id="create-manager" style="width: 200%;" type="text" value="张飞">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="create-phone">电话</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input class="form-control" id="create-phone" style="width: 200%;" type="text"
                                   value="010-84846004">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="create-describe">描述</label>
                        <div class="col-sm-10" style="width: 55%;">
                            <textarea class="form-control" id="create-describe" rows="3">description info</textarea>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal" type="button">关闭</button>
                <button class="btn btn-primary" data-dismiss="modal" type="button">更新</button>
            </div>
        </div>
    </div>
</div>

<div style="width: 95%">
    <div>
        <div style="position: relative; left: 30px; top: -10px;">
            <div class="page-header">
                <h3>部门列表</h3>
            </div>
        </div>
    </div>
    <div class="btn-toolbar" role="toolbar"
         style="background-color: #F7F7F7; height: 50px; position: relative;left: 30px; top:-30px;">
        <div class="btn-group" style="position: relative; top: 18%;">
            <button class="btn btn-primary" data-target="#createDeptModal" data-toggle="modal" type="button"><span
                    class="glyphicon glyphicon-plus"></span> 创建
            </button>
            <button class="btn btn-default" data-target="#editDeptModal" data-toggle="modal" type="button"><span
                    class="glyphicon glyphicon-edit"></span> 编辑
            </button>
            <button class="btn btn-danger" type="button"><span class="glyphicon glyphicon-minus"></span> 删除</button>
        </div>
    </div>
    <div style="position: relative; left: 30px; top: -10px;">
        <table class="table table-hover">
            <thead>
            <tr style="color: #B3B3B3;">
                <td><input type="checkbox"/></td>
                <td>编号</td>
                <td>名称</td>
                <td>负责人</td>
                <td>电话</td>
                <td>描述</td>
            </tr>
            </thead>
            <tbody>
            <tr class="active">
                <td><input type="checkbox"/></td>
                <td>1110</td>
                <td>财务部</td>
                <td>张飞</td>
                <td>010-84846005</td>
                <td>description info</td>
            </tr>
            <tr>
                <td><input type="checkbox"/></td>
                <td>1120</td>
                <td>销售部</td>
                <td>关羽</td>
                <td>010-84846006</td>
                <td>description info</td>
            </tr>
            </tbody>
        </table>
    </div>

    <div style="height: 50px; position: relative;top: 0px; left:30px;">
        <div>
            <button class="btn btn-default" style="cursor: default;" type="button">共<b>50</b>条记录</button>
        </div>
        <div class="btn-group" style="position: relative;top: -34px; left: 110px;">
            <button class="btn btn-default" style="cursor: default;" type="button">显示</button>
            <div class="btn-group">
                <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">
                    10
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="#">20</a></li>
                    <li><a href="#">30</a></li>
                </ul>
            </div>
            <button class="btn btn-default" style="cursor: default;" type="button">条/页</button>
        </div>
        <div style="position: relative;top: -88px; left: 285px;">
            <nav>
                <ul class="pagination">
                    <li class="disabled"><a href="#">首页</a></li>
                    <li class="disabled"><a href="#">上一页</a></li>
                    <li><a href="#">下一页</a></li>
                    <li class="disabled"><a href="#">末页</a></li>
                </ul>
            </nav>
        </div>
    </div>

</div>

</body>
</html>